<template>
  <div class="">
    <!-- 头部 -->
    <Tap @sort="sort"></Tap>
    <!-- 列表 -->
    <Lsit
      @removeCheck="removeCheck"
      @checkAllChange="checkAllChange"
      :obj="obj"
      @ChangeStateValue="ChangeStateValue"
    ></Lsit>
  </div>
</template>

<script>
import Tap from "../components/tap.vue";
import Lsit from "../components/lsit.vue";
import axios from "axios";
import { ref } from "vue";

// 状态改变的函数疯转
function stateChangeState() {}
export default {
  setup() {
    let obj = ref([]); // 总数据
    let loc = ref([]); // 备份数据

    // 上来
    axios.get("data.json").then((res) => {
      obj.value = res.data.goods;
      obj.value.forEach((item) => {
        item.checked = false;
        item.checkedS = "all";
      });
      loc.value = obj.value;
    });
    // 改变状态已完成 未完成
    function ChangeStateValue(i) {
      obj.value.forEach((item) => {
        if(item.id == i.id && item.state == 3){
          item.state = 0
        }else if(item.id == i.id ){
           item.state++
        }
        sort(item.state);
      });
    }

    // 全部选中状态改变
    function checkAllChange(e) {
      obj.value.forEach((item) => {
        item.checked = e;
      });
    }
    // 删除选中
    function removeCheck() {
      obj.value = obj.value.filter((item) => !item.checked);
    }

    // 筛选数据
    function sort(i) {
      if (i == "all") {
        obj.value = loc.value;
      } else {
        obj.value = loc.value.filter((item) => item.state == i);
      }
      obj.value.forEach((item) => {
        item.checkedS = i;
      });
    }

    return { obj, checkAllChange, removeCheck, sort, ChangeStateValue };
  },
  components: { Tap, Lsit },
};
</script>

<style lang="scss" scoped></style>
